<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">  
        <el-card class="box-card">  
          <div slot="header" class="clearfix header-with-flex">  
            <span class="header-left">月度销售额柱状图</span>  
            <div class="header-right">  
              <el-select v-model="selectedYear" @change="fetchData">  
                <!-- 这里添加年份选项 -->  
                <el-option  
                  v-for="year in years"  
                  :key="year"  
                  :label="year"  
                  :value="year"  
                />  
              </el-select>  
            </div>  
          </div>  
          <div ref="barChart" style="height: 480px; margin: 0 auto;" />  
        </el-card>  
      </el-col>  
      <el-col :span="12">  
        <el-card class="box-card">  
          <div slot="header" class="clearfix header-with-flex">  
            <span class="header-left">服装类别销量饼状图</span>  
            <div class="header-right">  
              <el-date-picker  
                v-model="timeRange"  
                type="daterange"  
                range-separator="至"  
                start-placeholder="开始日期"  
                end-placeholder="结束日期"  
                @change="fetchPieData"  
              />  
            </div>  
          </div>  
          <div ref="pieChart" style="height: 480px; margin: 0 auto;" />  
        </el-card>  
      </el-col>  
      
      <el-col :span="12">  
        <el-card class="box-card">  
          <div slot="header" class="clearfix header-with-flex">  
            <span class="header-left">月度销售额折线图</span>  
            <div class="header-right">  
              <el-select v-model="selectedYearLine" @change="fetchLineData">  
                <!-- 这里添加年份选项 -->  
                <el-option  
                  v-for="year in years"  
                  :key="year"  
                  :label="year"  
                  :value="year"  
                />  
              </el-select>  
            </div>  
          </div>  
          <div ref="lineChart" style="height: 480px; margin: 0 auto;" />  
        </el-card>  
      </el-col>  
    </el-row>
  </div>
</template>

<script>
import { yearPie, timePie } from '@/api/sale'
export default {
  name: 'Dashboard',
  data() {
    return {
      selectedYear: '2024', // 选择的年份
      selectedYearLine: '2024', // 选择的年份  
      years: [2024, 2023, 2022, 2021], // 这里假设你有这些年份可供选择  
      chart: null, // 用于存储echarts实例 
      timeRange: '', // 用于存储时间范围的变量  
      pieChart: null // 初始化echarts实例的引用
    }  
    },  
  watch: {  
    // 监听selectedYear的变化，并在变化时重新获取数据  
    selectedYear(newVal) {  
      if (newVal) {  
        this.fetchData()
      }  
    },
    // 监听selectedYear的变化，并在变化时重新获取数据  
    selectedYearLine(newVal) {  
      if (newVal) {  
        this.fetchDataLine()  
      }  
    }    
  },
  mounted() {
    this.initBarChart() // 组件加载时初始化图表
    this.fetchData()
    this.setTimeRange() // 设置默认时间范围
    this.initPieChart()
    // 触发数据获取  
    this.fetchPieData()
    this.initLineChart() // 组件加载时初始化图表
    this.fetchDataLine()   
  },
  
  methods: {
    setTimeRange() {  
      const today = new Date()  
      const threeMonthsAgo = new Date(today)  
      threeMonthsAgo.setMonth(today.getMonth() - 3)  
      this.timeRange = [  
        threeMonthsAgo,  
        today  
      ]  
    },  
    /** 时间格式转换 */
    formatDate(date) {  
  const year = date.getFullYear()  
  const month = String(date.getMonth() + 1).padStart(2, '0') // getMonth 返回的月份是从 0 开始的  
  const day = String(date.getDate()).padStart(2, '0')  
  return `${year}-${month}-${day}`  
  },  
    /** 初始化饼状图 */
    initPieChart() {
      this.pieChart = this.$echarts.init(this.$refs.pieChart) 
    },
      // 调用后端API并更新饼状图数据  
    fetchPieData() {  
      // 假设startDate和endDate是从timeRange中提取的  
      const [startDate, endDate] = this.timeRange
       console.log('endDate', endDate)
       const formattedStartDate = this.formatDate(startDate)
       const formattedEndDate = this.formatDate(endDate)
      timePie(formattedStartDate, formattedEndDate).then(response => {  
        // 假设response.data是您需要的数组  
        const newData = response.data.map(item => ({  
          name: item.category,  
          value: item.sales // 注意这里使用value而不是之前的name和value  
        }))
        console.log('newDate', newData)   
      const option = {
        title: {
          text: '热卖商品分析报表',
          subtext: '按服装类型统计',
          left: 'center' 
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '占所有产品的',
            type: 'pie',
            radius: '50%',
            data: newData, // 使用新数据 
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      this.pieChart.setOption(option)
    }).catch(error => {  
        // 处理错误  
       console.error('Error fetching pie data:', error)  
      })  
    },  
    /** 初始化柱状图 */
    initBarChart(){
      this.chart = this.$echarts.init(this.$refs.barChart) // 初始化图表实例
  },
  
  fetchData() {  
      if (this.selectedYear) { 
        console.log('year', this.selectedYear) 
        // 调用修改后的 yearPie 函数并传入年份  
        yearPie(this.selectedYear).then(response => {  
          // 假设response.data是后端返回的数据，它应该包含x轴和y轴的数据  
          const { xAxisData, seriesData } = response.data 
          // 如果你只需要值数组，而不是包含键的对象数组  
          const valuesOnlyArray = Object.values(response.data)
          console.log('valuesOnlyArray', valuesOnlyArray) 
          console.log('seriesData', seriesData) 
          const option = {  
            title: {
            text: '月度销售额统计报表',
            subtext: '按月份统计',
            left: 'center'
        }, 
            xAxis: {  
              type: 'category',  
              data: xAxisData // 使用后端返回的数据  
            },  
            yAxis: {  
              type: 'value'  
            },  
            series: [  
              {  
                data: valuesOnlyArray, // 使用后端返回的数据  
                type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            },
            label: {  
            show: true, // 显示柱子上的数值  
            position: 'top', // 数值的位置，可以是 'top'、'inside'、'insideTop'、'insideRight' 等  
            formatter: function(params) {  
              // 格式化标签内容，这里直接返回数值  
              return params.value  
            },  
            // 还可以添加其他的样式配置，比如：  
            color: 'black', // 字体颜色  
            fontSize: 12 // 字体大小  
            } 
              } 
               
            ]  
          }  
          this.chart.setOption(option) // 更新图表  
        }).catch(error => {  
          // 处理错误  
          console.error('Error fetching data:', error)  
        })  
      }  
    },
  /** 初始化折线图 */
    initLineChart(){
      this.lineChart = this.$echarts.init(this.$refs.lineChart) // 初始化图表实例
  },
  fetchDataLine() {  
      if (this.selectedYearLine) { 
        console.log('year', this.selectedYearLine) 
        // 调用修改后的 yearPie 函数并传入年份  
        yearPie(this.selectedYearLine).then(response => {  
          // 假设response.data是后端返回的数据，它应该包含x轴和y轴的数据  
          const { xAxisData, seriesData } = response.data 
          // 如果你只需要值数组，而不是包含键的对象数组  
          const valuesOnlyArray = Object.values(response.data)
          console.log('valuesOnlyArray', valuesOnlyArray) 
          console.log('seriesData', seriesData) 
          const option = {  
            title: {
            text: '月度销售额统计报表',
            subtext: '按月份统计',
            left: 'center'
        }, 
            xAxis: {  
              type: 'category',  
              data: xAxisData // 使用后端返回的数据  
            },  
            yAxis: {  
              type: 'value'  
            },  
            series: [  
              {  
                data: valuesOnlyArray, // 使用后端返回的数据  
                type: 'line',
                smooth: true,
              showBackground: true,
              backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
              },
            label: {  
            show: true, // 显示柱子上的数值  
            position: 'top', // 数值的位置，可以是 'top'、'inside'、'insideTop'、'insideRight' 等  
            formatter: function(params) {  
              // 格式化标签内容，这里直接返回数值  
              return params.value  
            },  
            // 还可以添加其他的样式配置，比如：  
            color: 'black', // 字体颜色  
            fontSize: 12 // 字体大小  
            } 
              } 
               
            ]  
          }  
          this.lineChart.setOption(option) // 更新图表  
        }).catch(error => {  
          // 处理错误  
          console.error('Error fetching data:', error)  
        })  
      }  
    }  
  }  
}
  
</script>
<style scoped lang="css">
.header-with-flex {  
  display: flex;  
  justify-content: space-between;  
  align-items: center;  
}  
</style>